import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, Flex, List, Button, Toast } from 'antd-mobile';
import { Link, routerRedux } from 'dva/router';
import styles from '../scale/styles.less';
import { SCALE_DIA, SCALE_DIA_C } from 'const';

function ScaleTemplate({ dispatch, location, form, scalevalue, detail, ...rest }) {

  let questions; 
  let { patientValue } = detail;
  const { getFieldProps, getFieldValue, setFieldsValue, validateFields, getFieldError } = form;
  const { state, query } = location;
  const { Item } = List;

  if(state.gender == 1){
      questions = SCALE_DIA_C;
  }else{
      questions = SCALE_DIA;
  }

  let scores = scalevalue[0] || [];

  function isDisable(name, value, i){
    if(detail && detail.patientValue){
      for(let i in detail.patientValue.split(",")){
        if(detail.patientValue.split(",")[i] === name){
          return true;
        }
      }
    }
    return false;
  }
  function isActive(key, value, i) {
    if (detail && detail.patientValue) {
      return detail.patientValue.split('')[i] === value;
    }

    if (Array.from(scores).find(item => item === key)) {
      return true;
    }

    if (!getFieldValue(key)) {
      return false;
    }

    return getFieldValue(key) === value;
  }

  return (
     <WingBlank size="md">
        {questions.map((question, id) => (
          <div>
          
          <List>
            <Item>
              {question.title}
            </Item>
         {question.subject.map((question, i) => (
              <List.Item wrap key={question.id}>
                {`${i + 1}. ${question.title}`}
                <List.Item.Brief>
                  <Flex wrap="wrap" className={styles.questionOptions}>
                    {question.item.map((option, ii) => {
                      const key = option.id;
                      const value = option.title;
                      const item = option.id;
                      return (
                        <label key={key} className={cx(styles.questionOption, styles.questionOptionNormal,{ [styles.questionOptionActive]: isDisable(key, value, i) })}>
                          <input {...getFieldProps(`${key}`)} type="checkbox" name={key} value={value}   />
                          {value}
                        </label>
                      );
                    })}
                  </Flex>
                </List.Item.Brief>
              </List.Item>
            ))}
          </List>
          <WhiteSpace size="lg" />
            </div>
        ))}
     </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScaleTemplate));
